<template>
  <div class="card-page">
    <tool-bar nav="" title="Yaml文件清理">
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">

          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>源:</div>
              <el-button size="small" @click="tidy_click" type="primary">清理</el-button>

              <kp label="新应用">
                <el-input v-model="$data.newApp"/>
                <el-button size="small" type="primary" @click="newApp_click">生成</el-button>
              </kp>
            </div>
          </template>

          <el-input v-model="info.source" type="textarea" :autosize="{ minRows: 15, maxRows: 24}"/>
        </el-card>
      </el-col>
      <el-col :span="12">

        <el-card shadow="always">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>目标:</div>

            </div>
          </template>

          <el-input v-model="info.target" type="textarea" :autosize="{ minRows: 15, maxRows: 24 }"/>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="apply_dlg" ref="apply_dlg" title="应用到" width="80vw">
      <div>
        <div>
          <kv label="环境" class="inline">
            <app-env v-model="info.targetEnv" @change="targetEnv_change" @proc="proc_data"
                     style="display: inline-block" chk="*"></app-env>
            <div v-if="currentSetting && currentSetting.code"
                 style="display: inline-block;margin-left:8px;margin-right:20px;">
              <el-tag>{{ currentSetting.code }}</el-tag>
              流水线：{{ currentSetting.pipelineTemplate_res }},
              集群：{{ currentSetting.clusterDeployEnv }}
            </div>
          </kv>

          <kv label="名称空间" class="inline">
            <el-input v-model="info.namespace" style="display: inline-block;max-width:180px;"
                      chk="*"></el-input>
          </kv>
          <kv label="名称" class="inline">
            <el-input v-model="info.name" style="display: inline-block;max-width:180px;" chk="*"></el-input>
          </kv>
          <kv label="类型" class="inline">
            <selector v-model="info.type" enum="K8sYamlType" chk="*"></selector>
          </kv>
          <el-button type="primary" style="margin-left: 8px;" @click="apply_click">应用</el-button>
        </div>

        <kv class="inline no-width" style="width:100%;" vStyle="width:100%;">
          <el-input v-model="info.target" type="textarea" :autosize="{ minRows: 15, maxRows: 24 }" style="width:100%"
                    chk="*"/>
        </kv>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import appEnv from "@/component/app-env.vue";




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  newApp: "",
  "apply_dlg": false,
  "currentSetting": {},
  "info": {"source": "", "target": "", "targetEnv": ""}
});
const info = $computed(() => $data.info);

const $props = defineProps({
  id: {type: String},
  action: {type: String}
});

const action_name = $computed(() => {
  return {add: "添加", edit: "修改"}[$props.action]
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const newApp_click = function(){
  //校验
  if (!$data.info.source) {
    return jv.info("请输入源");
  }
  jv.$saveData("info", $data.info)
  jv.$http.post(
      "/ops/k8s/deployment/yaml/chang-app",
      $data.info.source,
      {headers: {"Content-Type": "text/plain"}}
  )
      .then(res => {
        $data.info.target = res.data;
      })
}

const tidy_click = function () {
  //校验
  if (!$data.info.source) {
    return jv.info("请输入源");
  }
  jv.$saveData("info", $data.info)
  jv.$http.post(
      "/ops/k8s/deployment/yaml/tidy",
      $data.info.source,
      {headers: {"Content-Type": "text/plain"}}
  )
      .then(res => {
        $data.info.target = res.data;
      })
};
const proc_data = function (data) {
  data.removeItem(it => !it.url);
};
const targetEnv_change = function (v, m, p) {
  load_setting();
};
const load_setting = function () {
  jv.targetEnv = $data.info.targetEnv;
  var url = "/dev/app-deploy-setting/detail?code=" + ($data.info.targetEnv || "");
  jv.$http.get(url).then(res => {
    $data.currentSetting = res.data.data;
    $data.currentSetting.pipelineTemplate_res = "";
    $data.currentSetting.clusterDeployEnv_res = "";
    if ($data.currentSetting.pipelineTemplate) {
      $data.currentSetting.pipelineTemplate_res = jv.enum.PipelineTemplateEnum.getData($data.currentSetting.pipelineTemplate).remark;
    }
    if ($data.currentSetting.clusterDeployEnv) {
      $data.currentSetting.clusterDeployEnv_res = jv.enum.MicroServiceDeployEnvEnum.getData($data.currentSetting.clusterDeployEnv).remark;
    }
    this.version++;
  })
};
const apply_click = function () {
  if (this.$refs.apply_dlg.chk() == false) {
    return;
  }
  jv.$saveData("info", $data.info)
  var target = $data.info.target;
  var p = Object.assign({}, $data.info, {targetEnv: $data.info.targetEnv, isNative: true});
  delete p.source;
  delete p.target;
  jv.$http.post("/ops/k8s/service/deploy?" + jv.param(p), target, {headers: {"Content-Type": "text/plain"}});
};

onMounted(function () {
  jv.$loadData("info", v => $data.info = v)
})


</script>

<style scoped lang="scss">
textarea {
  width: 100%;
  height: 80vh;
  font-family: Microsoft Yahei, Arail, Tabhoma;
  line-height: 1.8;
}
</style>
